<!DOCTYPE html>
<!--
This is a starter template page. Use this page to start your new project from
scratch. This page gets rid of all links and provides the needed markup only.
-->
<html>
<head th:replace="common/head :: common_head(~{::title},~{})">
  <title>财税风险分析系统  |报表模板管理</title>
</head>

<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

  <div th:replace="common/header :: header"></div>
  
  <div th:replace="common/aside-admin :: aside"></div>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
  
    <section class="content-header">
      <h1 id="page-title" active-menu="reportTemplate-menu">报表模板列表
        <small></small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
        <li class="active">Here</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content container-fluid">
      <div class="row">
        <div class="col-xs-12">
          <div class="alert alert-success alert-missible fade in hidden">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
            <h4><i class="icon fa fa-check"></i> 保存成功！ </h4>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12">
          <div class="box">
            <div class="box-header">
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <table id="specTable" class="table table-bordered table-hover">
                <thead>
                  <tr>
                    <th>ID</th>
                    <th>名称</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>1</td>
                    <td>企业所得税纳税申报表</td>
                    <td>
                      <div class="btn-group">
                        <button type="button" class="btn btn-default"><i class="fa fa-edit"></i></button>
                        <button type="button" class="btn btn-default"><i class="fa fa-trash"></i></button>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->

    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
  
  <div th:replace="common/footer :: footer"></div>

  <!-- Add the sidebar's background. This div must be placed
  immediately after the control sidebar -->
  <div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->

<div class="modal fade" id="modal-add">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">添加报表模板</h4>
      </div>
      <div class="modal-body">
        <form id="addForm" class="form-horizontal">
          <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">名称</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" name="name" placeholder="">
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default pull-left" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" onclick="addSubmit()">保存</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

<div class="modal fade" id="modal-edit">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">编辑报表模板</h4>
      </div>
      <div class="modal-body">
        <form id="addForm" class="form-horizontal">
          <input type="hidden" name="id">
          <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">名称</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" name="name" placeholder="">
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default pull-left" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" onclick="editSubmit()">保存</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

<div class="modal fade" id="modal-delete">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">删除报表模板</h4>
      </div>
      <div class="modal-body">
        <input type="hidden" name="id">
        <p>确定要删除该条数据吗？</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default pull-left" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" onclick="deleteSubmit()">确定</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

<div th:replace="common/script :: script"></div>
<script>
  var table;
  $(function () {
    table = $('#specTable').DataTable({
      'paging'      : true,
      'lengthChange': false,
      'searching'   : true,
      'ordering'    : false,
      'info'        : true,
      'autoWidth'   : false,
      'dom'         : 'Bfrtip',
      'buttons': [
        {
          text: '<i class="fa fa-plus"></i>',
          action: function ( e, dt, node, config ) {
              $('#modal-add').modal('show');
          }
        }
      ],
      "ajax": "/admin/reportTemplate/list/data",
      "columns": [
          { "data": "id" },
          { "data": "name" },
          { "data": null}
      ],
      "columnDefs": [
        {
          targets: 2,
          render: function (data, type, row, meta) {
            return '<div class="btn-group">'
            + '<button type="button" class="btn btn-default" onclick="openEditModal(' + data.id + ')"><i class="fa fa-edit"></i></button>'
            + '<button type="button" class="btn btn-default" onclick="openDeleteModal(' + data.id + ')"><i class="fa fa-trash"></i></button>'
            + '</div>';
          }
        },
        { "orderable": false, "targets": 2 },
      ],
      language:{
          "sProcessing":   "处理中...",
          "sZeroRecords":  "没有匹配结果",
          "sInfo":         "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
          "sInfoEmpty":    "显示第 0 至 0 项结果，共 0 项",
          "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
          "sInfoPostFix":  "",
          "sSearch":       "搜索:",
          //"sUrl":          "",
          "sEmptyTable":     "表中数据为空",
          "sLoadingRecords": "载入中...",
          "sInfoThousands":  ",",
          "oPaginate": {
              "sFirst":    "首页",
              "sPrevious": "上页",
              "sNext":     "下页",
              "sLast":     "末页"
          },
          "oAria": {
              "sSortAscending":  ": 以升序排列此列",
              "sSortDescending": ": 以降序排列此列"
          }
      }
    });
    
  });
  
  function addSubmit() {
    $.ajax({
      url: "/admin/reportTemplate/add",
      data: '{"name": "' + $('#modal-add input[name="name"]').val() + '"}',
      contentType: "application/json;charset=utf-8",
      type: "POST",
      headers: {
        Accept: "application/json"
      },
      success: function(data, textStatus) {
        console.log(data);
        $('#modal-add').modal('hide');
        table.ajax.reload();
        $(".alert h4").html('<i class="icon fa fa-ban"></i> 保存成功!');
        $(".alert").removeClass("alert-danger hidden").addClass("alert-success");
        autoCloseAlert(2000);
      },
      error: function (data, textStatus, errorThrown) {
        console.log(data);
        $(".alert h4").html('<i class="icon fa fa-ban"></i> 保存失败!');
        $(".alert").removeClass("alert-success hidden").addClass("alert-danger");
        autoCloseAlert(2000);
      }
    });

  }
  
  function openEditModal(id) {
    $.ajax({
      url: "/admin/reportTemplate/queryById/" + id,
      type: "GET",
      success: function(data, textStatus) {
        console.log(data);
        $('#modal-edit input[name="id"]').val(data.id);
        $('#modal-edit input[name="name"]').val(data.name);
        $('#modal-edit').modal('show');
      },
      error: function (data, textStatus, errorThrown) {
        console.log(data);
      }
    });

  }
  
  function editSubmit() {
    $.ajax({
      url: "/admin/reportTemplate/update/" + $('#modal-edit input[name="id"]').val(),
      data: '{"id": "' + $('#modal-edit input[name="id"]').val() + '",'
          + '"name": "' + $('#modal-edit input[name="name"]').val() + '"}',
      contentType: "application/json;charset=utf-8",
      type: "PUT",
      headers: {
        Accept: "application/json"
      },
      success: function(data, textStatus) {
        console.log(data);
        $('#modal-edit').modal('hide');
        table.ajax.reload();
        $(".alert h4").html('<i class="icon fa fa-check"></i> 保存成功!');
        $(".alert").removeClass("alert-danger hidden").addClass("alert-success");
        autoCloseAlert(2000);
      },
      error: function (data, textStatus, errorThrown) {
        console.log(data);
        $('#modal-edit').modal('hide');
        $(".alert h4").html('<i class="icon fa fa-ban"></i> 保存失败!');
        $(".alert").removeClass("alert-success hidden").addClass("alert-danger");
        autoCloseAlert(2000);
      }
    });

  }
  
  function openDeleteModal(id) {
    $('#modal-delete').modal('show');
    $('#modal-delete input[name="id"]').val(id);
  }
  
  function deleteSubmit() {
    $.ajax({
      url: "/admin/reportTemplate/delete/" + $('#modal-delete input[name="id"]').val(),
      type: "DELETE",
      success: function(data, textStatus) {
        $('#modal-delete').modal('hide');
        table.ajax.reload();
        $(".alert h4").html('<i class="icon fa fa-check"></i> 删除成功!');
        $(".alert").removeClass("alert-danger hidden").addClass("alert-success");
        autoCloseAlert(2000);
      },
      error: function (data, textStatus, errorThrown) {
        $('#modal-delete').modal('hide');
        $(".alert h4").html('<i class="icon fa fa-ban"></i> 删除失败!');
        $(".alert").removeClass("alert-success hidden").addClass("alert-danger");
        autoCloseAlert(2000);
      }
    });

  }
  
</script>
</body>
</html>